
.ambient-sounds-player {
  @apply max-w-3xl mx-auto;

  input[type="range"] {
    @apply bg-accent/70;
    -webkit-appearance: none;
    width: 90%;
    height: 5px;
    outline: none;
    opacity: 0.7;
    transition: opacity 0.2s;
  }

  input[type="range"]::-webkit-slider-thumb {
    @apply bg-accent;
    -webkit-appearance: none;
    appearance: none;
    width: 15px;
    height: 15px;
    cursor: pointer;
    border-radius: 50%;
  }

  .control-bar {
    @apply flex grow mb-4 gap-8 text-xl justify-between;
  }

  .ambient-sounds-list {
    .sound {
      @apply relative rounded-lg font-semibold text-base-content/60 bg-base-100/60 border-base-content/30 opacity-70;
      border-width: 2px;

      transition: all 0.2s ease-in-out;

      svg.sound-wave {
        @apply fill-base-content;
        opacity: 1;
      }

      i.ti {
        @apply text-5xl;
      }

      svg {
        @apply fill-base-content;
      }

      .wave-wrapper {
        position: absolute;
        bottom: 10px;
        right: 10px;

        svg {
          @apply fill-base-content/30;
          width: 25px;
          height: auto;
        }
      }

      .slider-wrapper {
        position: absolute;
        transform: rotate(-90deg);
        top: 39%;
        left: -36%;
        width: 78%;
        height: 20px;
      }

      &:hover {
        @apply border-accent/65 opacity-80;

        svg {
          @apply fill-base-content/65;
        }
      }

      &.sound-selected {
        @apply border-accent/80 opacity-90;

        svg {
          @apply fill-base-content/80;
        }
      }

      &.sound-playing {
        @apply border-accent/90 text-accent/80 opacity-100;

        svg {
          @apply fill-accent/90;
        }
      }
    }
  }
}
